<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 注意：盒子只会压住后边的标准流，不会影响前边的标准流 */
        .nav {
            width: 400px;
            height: 400px;
            background-color: sandybrown;
        }/* 标准流1把第一行占满，所以浮动跳转到第二行 */
        .damao {
            width: 90px;
            height: 90px;
            background-color: red;
        }
        .ermao {
            width: 90px;
            height: 90px;
            background-color: gray;
            float: left;
        }
        /* 因为浮动1和标准流2不在同一个层级，所以标准流2占用浮动1的位置，跑到浮动下边 */
        .sanmao {
            width: 100px;
            height: 90px;
            background-color: greenyellow;
            
        }
        /* 因为标准流2占满一行，所以后边的标准流另起一行 */
        .simao {
            width: 90px;
            height: 90px;
            background-color: yellow;
            float: left;
        }
        
    </style>
</head>
<body>
    <div class="nav">
        <div class="damao">标准流1</div>
        <div class="ermao">浮动1</div>
        <div class="sanmao">标准流2</div>
        <div class="simao">浮动2</div>
    </div>
</body>
</html>